<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素增删改</title>
</head>
<body>
    <select id="yy">
        <option>---请选择地区---</option>
        <option>长沙</option>
        <option>武汉</option>
        <option>南京</option>
    </select>
</body>

    <script>
        //1. createElement() 创建新的元素
        //添加标签
        let option =document.createElement("option");
        //标签里面添加内容
        option.innerText="爱情国";

        //2. appendChild()  将子元素添加父元素
        //首先获取它的父元素
        let select= document.getElementById("yy");

        select.appendChild(option);

        //3.removeChild()  通过父元素删除子元素
        //select.removeChild(option);
        
        //4. replaceChild  新元素替换旧元素
        let option2 =document.createElement("option");
        option2.innerText="北京";

        select.replaceChild(option2,option);
    
    </script>
</html>